@import '../variables.scss';

.MatUploader {


    .MatcHint {
        color: $text_color_passive;
        font-size: 1rem;
        display: block;
        padding-bottom: calc(0.5em - 1px);
        padding-left: calc(0.75em - 1px);
        padding-right: calc(0.75em - 1px);
        padding-top: calc(0.5em - 1px);
      }

}

.MatUploaderDropZone {
        
    border: 1px solid $input_border;
    transition: 0.2s all;
    cursor: pointer;
    height: 96px;
    position: relative;
    border-radius: 4px;

    &.MatUploaderHasFile {
      border: 0px;
      border-radius: 4px;
      overflow: hidden;
    }

    input {
      width: 100%;
      height: 100%;
      border:none;
      opacity: 0;
      cursor: pointer;
      position: absolute;
      top: 0px;
      left: 0px;
    }

    &:hover{
      border-color: $input_border_focus;

      .MatcHint {
        color: $input_border_focus;
      }
    }

    &.MatUploaderDropZoneHover{
      border-color: $main_color;

      .MatcHint {
        color: $main_color;
      }
    }

    .MatUploaderPreview{
      display: block;
      height: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
   
      &:hover {
        .MatUploaderPreviewRemove {
          opacity: 1;
        }
      }

      .MatUploaderPreviewRemove {
        position: absolute;
        top:0px;
        right: 5px;
        font-size: 24px;
        text-shadow: 0px 0px 10px rgb(255 255 255);
        opacity: 0;

        &:hover {
          color: #f83a3a;
        }
      }
    }
}

